<template>
  <div class="creator">
    <div class="personal bg-background">
      <div class="bg">
        <EncryptImage :src="creator?.background_img" object-fit="cover" click-to-full></EncryptImage>
      </div>
      <div class="content">
        <AvatarContainer :avatar="creator?.avatar" :vip="creator?.is_vip">
          <template #buttons>
            <FollowButton :user-id="aff" :is-follow="creator?.is_follow"></FollowButton>
          </template>
        </AvatarContainer>
        <CreatorInfo
          :username="creator?.username"
          :display-name="creator?.nickname"
          :fans="creator?.fans"
          :post="creator?.post"
          :watches="creator?.view"
          :description="creator?.bio"
          :link-instagram="creator?.link_instagram"
          :link-tiktok="creator?.link_tiktok"
          :link-twitter="creator?.link_twitter"
          :link-vida="creator?.link_vida"
        ></CreatorInfo>
        <div v-show="showSubscrbeBtn" class="px-4 pb-4">
          <BlockButton
            :label="$t('label.personalSubscribeBtn', { price: toFixedString(creator?.subscribe_price, 2) })"
            @click="
              subscribe({
                item: {
                  author: {
                    aff: creator?.aff,
                    avatar: creator?.avatar,
                    nickname: creator?.nickname,
                    username: creator?.username,
                    price: creator?.subscribe_price,
                  },
                },
                gtmKey: 18,
                showClose: false,
                showCancel: false,
              })
            "
          ></BlockButton>
        </div>
        <div class="media">
          <MediaWall
            v-model="media"
            :subs-data="dataList"
            :subs-loading="loading"
            :subs-no-more="noMore"
            @intersect="nextPage"
            @click:item="onItemClick"
          ></MediaWall>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, onActivated, onDeactivated, ref, shallowRef, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useCreatorStore } from '@/store/creator'
import { useNavStore } from '@/store/nav'
import { toFixedString } from '@/utils/string-helper'
import BlockButton from '@/components/button/BlockButton.vue'
import AvatarContainer from '@/components/layout/creator/AvatarContainer.vue'
import CreatorInfo from '@/components/layout/creator/CreatorInfo.vue'
import MediaWall from '@/components/media/MediaWall.vue'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'
import FollowButton from '@/components/viewer/stateful/FollowButton.vue'
import { useInfinite } from '@/compositions/request/infinite'
import { useDialog } from '@/compositions/viewer/dialog'
import { FEED_PERMISION, MEDIA_TYPE } from '@/constant'
import API from '@/http'

const { t: $t } = useI18n()
const media = ref(MEDIA_TYPE.SUBS)

const route = useRoute()
const aff = ref(Number(route.query.aff) || null)

const accountStore = useAccountStore()
const { isLogin } = storeToRefs(accountStore)

const { getCreator } = useCreatorStore()
const creator = shallowRef({})

const { dataList, refresh, loading, noMore, nextPage } = useInfinite({
  request: API.Media.getPostList,
  params: { aff: aff.value, visible: FEED_PERMISION.SUB },
})

watch(
  () => route.query.aff,
  async () => {
    if (!isLogin.value) toHome()
    if (aff.value) {
      creator.value = await getCreator(Number(aff.value))
      if (!creator.value?.aff) toHome()
      refresh({ newParams: { aff: aff.value, visible: FEED_PERMISION.SUB } })
    }
  },
  { immediate: true },
)

const { userId } = storeToRefs(accountStore)
const isSelf = computed(() => creator.value?.aff === userId.value)
const showSubscrbeBtn = computed(() => {
  return (
    creator.value?.subscribe_button && // 創作者有開啟訂閱按鈕
    creator.value?.subscribe_price > 0 && // 訂閱金額要大於 0
    !creator.value?.is_subscribe && // 用戶未訂閱
    !isSelf.value // 用戶跟創作者不是同一人
  )
})

const { subscribe } = useDialog()

const onItemClick = (index) => {
  const item = dataList.value[index]

  // 訂閱
  if (item.need_subscribe) {
    subscribe({
      item: {
        author: {
          aff: item.author.aff,
          avatar: item.author.avatar,
          nickname: item.author.nickname,
          username: item.author.username,
          price: creator.value.subscribe_price,
        },
        id: item.id,
      },
      gtmKey: 27,
      showClose: false,
      showCancel: false,
    })
  }
}

const { hide, show, toHome } = useNavStore()
onActivated(hide)
onDeactivated(show)
</script>
<style lang="scss" scoped>
.fold-enter-active,
.fold-leave-active {
  transition: transform 0.3s ease-in;
}
.fold-enter-from,
.fold-leave-to {
  transform: translateX(4rem);
}

.creator {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .viewer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    transform-origin: center;

    &.transition {
      transition: transform 0.5s, opacity 0.5s;
    }
  }
}

.personal {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  .bg {
    width: 100%;
    height: 9.5625rem;
    color: mediumorchid;
    background-color: cadetblue;
  }

  .content {
    height: calc(100% - 40.8vw + 2.5rem);
    transform: translateY(-2.5rem);
  }
}
</style>
